<template>
	<view style="height: 100%;">
		<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query" :default-page-no="1"
			:default-page-size="10">
			<view class="searchBox viewWidth">
				<view v-if="location" style="max-width: 300rpx;">
					<u--text size='24rpx' lines='1' :text='location.name' />
				</view>
				<view @click='jumpMap' style="flex: 1;">
					<u--input disabledColor='#FFF' :disabled="true" shape='circle' placeholder="搜索附近的小区"
						prefixIcon="map" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
			</view>
			
			<view class="viewWidth" style="margin: 10rpx auto;
    box-shadow: 0 0 10rpx #999;
    border-radius: 8rpx;">
				<u-swiper radius='8rpx' height='400rpx' :list="banner" keyName="thumb" @click='clickSwiper'></u-swiper>
			</view>
			<view class="contentBox viewWidth">
				<template v-if="loading">
					<view class="contentItem" v-for="item in 8" :key="item">
						<view class="Skeleton" style="width: 100%;height: 300rpx;" />
						<view class="itemInfo">
							<view class="Skeleton" style="width:100%;height: 30rpx;margin-top: 10rpx" v-for="item in 2"
								:key='item' />
							<view class="userBox">
								<view class="Skeleton" style="width:40rpx;height: 40rpx;border-radius: 100%;" />
								<view class="Skeleton" style="width:100%;height: 30rpx;" />
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="contentItem" v-for="item in data" :key="item.id" @click="jump(item)">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view class="itemInfo">
							<view class="public" v-if="!item.is_public">
								<u-icon name="account" size="28rpx" color='#fff' />
							</view>
							<view class="public" v-else>
								<text class="icon-kehu iconfont" style="color: #fff;" />
							</view>
							<view>
								<u--text :text='item.title' size='26rpx' :lines='1' />
							</view>
							<view class="map">
								<u--text :iconStyle='{color:"#fff"}' lines='1' prefixIcon='clock' color='#fff'
									:text='item.has_started?"已开始":item.start_at' size='24rpx' />
							</view>
							<view class="userBox">
								<u-avatar mode='aspectFill' size='40rpx' :src='item.user.avatar' />
								<view>
									<u--text lines='1' :text='item.user.nick_name' size='24rpx' />
								</view>

								<u-icon name="account" size="28rpx" labelSize='24rpx' :label='item.user_count' />
							</view>
						</view>
					</view>
				</template>
			</view>
		</z-paging>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				data: [],
				loading: true,
				location: uni.getStorageSync('location')
			}
		},
		methods: {
			clickSwiper(e) {
				let url = this.banner[e].url
				this.$utils.navigateTo({
					url: url
				})
			},
			jump(item) {
				if (!item.has_started) {
					this.$utils.navigateTo({
						url: "/Conquer/detailNoStar?id=" + item.id
					})
				} else if (item.is_public) {
					this.$utils.navigateTo({
						url: "/Conquer/Detail?id=" + item.id
					})
				} else {
					this.$utils.navigateTo({
						url: "/User/detail?conquer_id=" + item.id + '&id=' + item.user_id
					})
				}
			},
			jumpMap() {
				const key = 'DCXBZ-JBDKZ-TJLXK-7DBNW-U75I2-3ZB7C'; //使用在腾讯位置服务申请的key
				const referer = 'wx15189f73ac6ca690' //调用插件的app的名称
				wx.getLocation({
					success: (res) => {
						const location = JSON.stringify({
							latitude: res.latitude,
							longitude: res.longitude
						});
						uni.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer +
								'&location=' + location
						});
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			query(page, size) {
				const obj = {
					page,
					size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Home.List(obj).then(res => {
					this.loading = false
					this.$emit('getDate',res.data)
					// this.$refs.paging.completeByNoMore(res.data.conquers, true)
					this.$refs.paging.complete(res.data.conquers)
					this.banner = res.data.gSliderBanners
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.data.message)
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.searchBox {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		font-size: 24rpx;

		>view:nth-child(2) {
			flex: 1;
			margin-left: 10rpx;
		}
	}

	.contentBox {
		margin: 20rpx auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		image {
			width: 100%;
			background-color: #000;
			height: 300rpx;
			border-radius: 8rpx 8rpx 0 0;
			box-shadow: 0 0 20rpx #aaa;
		}

		.contentItem {
			background-color: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			position: relative;
			box-shadow: 0 0 10rpx #999;
			width: 350rpx;
			padding: 10rpx;
			box-sizing: border-box;

			.map {
				position: absolute;
				top: 260rpx;
				left: 20rpx;
				width: 300rpx;
			}

			.public {

				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				z-index: 11;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.userBox {
			display: flex;
			align-items: center;
			margin: 10rpx 0;

			>view:nth-child(2) {
				margin-left: 20rpx;
				flex: 1;
			}
		}


	}
</style>